<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->

    <!-- 
      cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
r属性定义圆的半径


     -->

    <!-- <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <circle cx="80" cy="60" r="50" fill="red" />
    </svg> -->

    <!-- <div class="circle-box">
      <div class="circle-left"></div>
      <div class="circle-right"></div>
      <div class="progress-left"></div>
      <div class="progress-right"></div>
      <div class="mask"></div>
    </div> -->

    <div id="container" class="line"></div>

    <svg
      width="800"
      height="800"
      version="1.1"
      xmlnx="http://www.w3.org/2000/svg"
    >
      <defs>
        <linearGradient id="gradient">
          <stop offset="0%" style="stop-color: red" />
          <stop offset="100%" style="stop-color: yellow" />
        </linearGradient>
      </defs>
      <circle
        cx="300"
        cy="200"
        r="100"
        stroke="#eee"
        stroke-width="20"
        fill="none"
      ></circle>
      <circle
        v-for="item in arcArr"
        :key="item"
        class="circle"
        cx="300"
        cy="200"
        r="100"
        stroke="url(#gradient)"
        stroke-dasharray="300,1000"
        stroke-width="20"
        fill="none"
        transform="rotate(-90, 300, 200)"
        stroke-linecap="round"
      >
        <animate
          from="0,1000000"
          to="300,1000000"
          begin="0s"
          dur="0.5s"
          attributeName="stroke-dasharray"
        />
      </circle>
    </svg>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import { Line } from "@antv/g2plot";

export default {
  name: "App",
  components: {
    // HelloWorld
  },
  data() {
    return {
      arcArr: [1, 4, 5],
    };
  },
  mounted() {
    const data = [
      { year: "1991", value: 3 },
      { year: "1992", value: 4 },
      { year: "1993", value: 3.5 },
      { year: "1994", value: 5 },
      { year: "1995", value: 4.9 },
      { year: "1996", value: 6 },
      { year: "1997", value: 7 },
      { year: "1998", value: 9 },
      { year: "1999", value: 13 },
    ];
    const line = new Line("container", {
      data,
      xField: "year",
      yField: "value",
    });

    line.render();
  },
};
</script>

<style>
.line {
  width: 200px;
  height: 200px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.circle {
  transform: "rotate(-90)";
  transform-origin: "center";
}
.circle-box {
  width: 200px;
  height: 200px;
  position: relative;
}
.circle-right {
  width: 200px;
  height: 200px;
  background-image: linear-gradient(to right, #bef5dc, #f8fafc);
  border-radius: 50%;
  position: absolute;
  clip: rect(100px, auto, auto, auto);
  transform: rotate(-110deg);
  z-index: 100;
}
.circle-left {
  width: 200px;
  height: 200px;
  background-image: linear-gradient(to right, #1db0a5, #bef5dc);
  border-radius: 50%;
  position: absolute;
  clip: rect(100px, auto, auto, auto);
  transform: rotate(70deg);
  z-index: 100;
}
.progress-left {
  width: 200px;
  height: 200px;
  background: #f8fafc;
  border-radius: 50%;
  position: absolute;
  z-index: 200;
  clip: rect(auto, 100px, auto, auto);
  transform: rotate(-70deg);
}
.progress-right {
  width: 200px;
  height: 200px;
  background: #f8fafc;
  border-radius: 50%;
  position: absolute;
  z-index: 200;
  clip: rect(auto, auto, auto, 100px);
}
.mask {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  /* background: #f9fafc; */
  background: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 300;
}
</style>
